<!-- @format -->

<template>
	<div class="page-container">
		<page_breadcrumb :getKeyMethod="init_table_model" @change="change_table_model" pageOption />
		<ex_super_table_page v-bind="option" ref="SuperTablePage" @selection-change="(e) => (selection = e)"> </ex_super_table_page>

		<ex_super_dialog_form ref="detail_dialog" v-bind="detail_dialog"> </ex_super_dialog_form>
		<ex_super_dialog_form ref="upload_dialog" v-bind="upload_dialog"> </ex_super_dialog_form>

		<common_print_dialog_url
			ref="common_print_dialog_url"
			:tableModel="[
				{
					key: 'orderType',
					label: 'label_platform',
					width: 140,
					'show-overflow-tooltip': true,
					formatter: (r, c, v, i) => this.$enumShow(v, 'SrmOrderStatusEnum'),
				},
				{ key: 'fileNumber', label: 'label_platform_file_code', 'min-width': 140 },
				{
					key: 'orderCount',
					label: 'label_order_count',
					width: 110,
				},
			]"
		/>
	</div>
</template>
<script>
import superTablePageFunction from '@/mixin/super-table-page-function';
import emitOnFunction from '@/mixin/emit-on-function';
import common_print_dialog_url from '@/component/print/common_print_dialog_url';

import page_table_model_manage from '@/mixin/page_table_model_manage';
let emitKey = 'outbound>handover_file_manage_service';

export default {
	title: 'label_service_handover_file',
	mixins: [superTablePageFunction, emitOnFunction(emitKey), page_table_model_manage],
	components: { common_print_dialog_url },
	data() {
		return {
			selection: [],
			option: {
				search: {
					model: [
						{ key: 'supplierName', label: 'label_logistics_supplier' },

						{ key: 'fileNumber', label: 'label_file_code' },
						{
							label: 'label_create_time',
							key: 'startCreateTime',
							fold: false,
							type: 'date-picker',
							attrs: { type: 'datetime' },
							render: (h, { data, item }) => {
								const value = data[item.key];
								const limitKey = 'endCreateTime';
								const limitValue = data[limitKey];
								return (
									<ex_super_input
										value={value}
										onInput={(e) => this.$set(data, item.key, e)}
										type='date-picker'
										placeholder='label_start_time'
										attrs={{ type: 'datetime' }}
										pickerOptions={{
											disabledDate: (date) => {
												return limitValue ? limitValue < date.getTime() : false;
											},
										}}
									/>
								);
							},
						},
						{
							label: '~',
							key: 'endCreateTime',
							fold: false,
							type: 'date-picker',
							attrs: { type: 'datetime' },
							render: (h, { data, item }) => {
								const value = data[item.key];
								const limitKey = 'startCreateTime';
								const limitValue = data[limitKey];
								return (
									<ex_super_input
										value={value}
										onInput={(e) => this.$set(data, item.key, e)}
										type='date-picker'
										placeholder='label_end_time'
										attrs={{ type: 'datetime', 'default-time': '23:59:59' }}
										pickerOptions={{
											disabledDate: (date) => {
												return limitValue ? limitValue > date.getTime() : false;
											},
										}}
									/>
								);
							},
						},
					],
				},
				actionExtra: [
					{
						label: 'label_batch_print',
						attrs: { type: 'primary' },
						click: () => {
							if (_.isEmpty(this.selection)) {
								return this.$message.error(this.$tt('tip_please_select_order'));
							}
							this.$refs.common_print_dialog_url.show(this.selection);
						},
					},
				],

				table: {
					url: '/wms-api/outbound/WmsDeliveryReceiptRpc/selectListPage.json',

					model: this.init_table_model(),
				},
			},
			detail_dialog: {
				customClass: 'dialog_big',
				detailUrl: '/wms-api/outbound/WmsDeliveryReceiptRpc/detail.json',
				detailDataHandle: (data) => {
					data.files = data.imagesPath
						? data.imagesPath
								.split(',')
								.filter((it) => it)
								.map((it) => ({ filePath: it.trim() }))
						: [];
					return data;
				},
				form: {
					inputClass: 'bold',
					model: [
						{ header: 'label_base_info' },
						{
							grid: [
								[
									{
										span: 8,
										col: { key: 'fileNumber', label: 'label_file_code', formType: 'text' },
									},
									{
										span: 8,
										col: {
											key: 'fileName',
											label: 'label_file_name',
											render: (h, { data }) => {
												if (!data.filePath) return;
												return (
													<a class='a_file_link' target='_blank' href={this.$ex_default_download_url + data.filePath} download={data.fileName}>
														<i class='el-icon-download el-icon--left' />
														{data.fileName}
													</a>
												);
											},
										},
									},
									{
										span: 8,
										col: {
											key: 'gmtCreate',
											label: 'label_create_time',
											formType: 'text',
											formatter: (r, c, v, i) => this.$dateFormat(v),
										},
									},
								],
								[
									{
										span: 8,
										col: {
											key: 'orderCount',
											label: 'label_order_count',
											formType: 'text',
										},
									},
									{
										span: 8,
										col: {
											key: 'checkConfirm',
											label: 'label_is_verification',
											render: (h, s) => {
												return this.$renderText(h, s, { enum: 'YesOrNoEnum' });
											},
										},
									},
									{
										span: 8,
										col: { key: 'remark', label: 'label_remark', formType: 'text' },
									},
								],
							],
						},
						{
							key: 'files',
							label: 'label_handover_order_photo',
							render: (h, { data, item }) => {
								if (_.isEmpty(data.files)) {
									return this.$renderText(h, { data, item });
								}
								return <ex_super_upload value={data.files} type='image' accept='image/png,image/jpeg' disabled={true} limit={3} headers={{ targetFolder: 'wms/handover' }} />;
							},
						},

						{
							key: 'orderList',
							formType: 'itemTable',
							height: 400,
							model: [
								{
									key: 'orderNo',
									label: 'label_outbound_code',
									'min-width': 120,
									render: (h, { row, column }) => this.$renderText(h, { row, column }),
								},
								{
									key: 'boxNo',
									label: 'label_collect_package_code',
									'min-width': 120,
									render: (h, { row, column }) => this.$renderText(h, { row, column }),
								},
								{
									key: 'trackNumber',
									label: 'label_face_track_code',
									'min-width': 120,
									render: (h, { row, column }) => this.$renderText(h, { row, column }),
								},
							],
						},
					],
				},
			},
			upload_dialog: {
				customClass: 'dialog_default',
				detailUrl: '/wms-api/outbound/WmsDeliveryReceiptRpc/detail.json',
				detailDataHandle: (data) => {
					data.files = data.imagesPath
						? data.imagesPath
								.split(',')
								.filter((it) => it)
								.map((it) => ({ filePath: it.trim() }))
						: [];

					return data;
				},
				submitUrl: '/wms-api/outbound/WmsDeliveryReceiptRpc/uploadImages.json',
				submitDataHandle: (data) => {
					return {
						imagesPath: data.files ? data.files.map((it) => it.filePath).join(',') : '',
						fileNumber: data.fileNumber,
					};
				},
				form: {
					model: [
						{
							key: 'files',
							label: 'label_handover_order_photo',
							render: (h, { data }) => {
								return (
									<ex_super_upload
										value={data.files}
										type='image'
										accept='image/png,image/jpeg'
										onInput={(e) => this.$set(data, 'files', e)}
										onIsUploadChange={(e) =>
											data.files.forEach((it) => {
												it.isUpload = e;
											})
										}
										limit={3}
										headers={{ targetFolder: 'wms/handover' }}
									/>
								);
							},
						},
					],
					rules: {
						files: {
							validator: (r, v, cb) => {
								if (_.isEmpty(v)) {
									cb(this.$tt('tip_can_no_empty'));
								} else if (v.some((it) => it.isUpload)) {
									cb(this.$tt('label_uploading'));
								} else {
									cb();
								}
							},
						},
					},
				},
			},
		};
	},
	methods: {
		option_table_model() {
			return [
				{ type: 'selection', clickToggle: true, keyGroup: 'label_table_operate' },

				{
					key: 'supplierName',
					label: 'label_logistics_supplier',
					width: 140,
					'show-overflow-tooltip': true,
				},
				{ key: 'fileNumber', label: 'label_file_code', 'min-width': 140 },
				{
					key: 'orderCount',
					label: 'label_order_count',
					width: 110,
				},

				{
					key: 'fileName',
					label: 'label_file_name',
					'min-width': 140,
					render: (h, { row }) => {
						if (!row.filePath) return;
						return (
							<a class='a_file_link' target='_blank' href={this.$ex_default_download_url + row.filePath} download={row.fileName}>
								<i class='el-icon-download el-icon--left' />
								{row.fileName}
							</a>
						);
					},
				},
				{ key: 'gmtCreate', label: 'label_create_time', width: 140, formatter: (r, c, v, i) => this.$dateFormat(v) },
				{ key: 'remark', label: 'label_remark', width: 130, 'show-overflow-tooltip': true },
				{
					type: 'operate',
					width: 200,
					fixed: 'right',
					operate: [
						{
							label: 'label_photo_upload',
							click: (row) => {
								if (_.isEmpty(row.imagesPath)) {
									this.$refs.upload_dialog.showNew({
										title: this.$tt('label_handover_order_photo'),
										params: { id: row.id },
									});
								} else {
									this.$message.error(this.$t('tip_has_upload_photo'));
								}
							},
						},

						{
							label: 'label_print',
							click: (row) => this.$refs.common_print_dialog_url.show([row], { single: true }),
						},
						{
							label: 'label_view_detail',
							click: (row) => {
								this.$refs.detail_dialog.showNew({
									title: this.$tt('label_handover_file_detail'),
									params: { id: row.id },
								});
							},
						},
					],
				},
			];
		},
	},
};
</script>
<style></style>
